<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
  <head>
    <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
    <title>Widgeon Manager</title>
    <style>
      /* In a hurry, I nicked pieces of this from http://cssdesk.com/ */
      body  {
          overflow:   hidden;
          color:  #777;
          font-family:    "Helvetica Neue", Helvetica, Arial, sans-serif;
          margin: 0;
          padding:    0;
          background: #2574b0;
      }

      header {
          background:  -moz-linear-gradient(
      	    center top,
      	    #8f9398 0%,
      	    #5a616a 100%
      	);
      	-moz-box-shadow:    3px 0 3px #000;
          color:  #fff;
          display:    block;
          height: 33px;
          line-height:    33px;
          overflow:   hidden;
          padding:    0 0 0 10px;
      }

      header h1 {
          float:  left;
          font-size:  13px;
          margin: 0;
          text-shadow:    0 -1px 0 rgba(0, 0, 0, 0.4);
          text-transform: uppercase;
          word-spacing:   -2px;
      }

      header h1 span {
          color:  rgba(255, 255, 255, 0.6);
          font-weight:    200;
      }

      header h1 em {
          color:  rgba(255, 255, 255, 0.8);
          font-size:  0.85em;
          font-weight:    normal;
          text-transform: none;
      }

      nav {
          float:  right;
          line-height:    28px;
      }

      nav ul {
          list-style:     none outside none;
          margin: 0;
          padding:    0;
      }

      nav ul li {
          border-left:    2px groove #666;
          float:  left;
          padding:    0 10px 0 11px;
          line-height:    32px;
      }

      .button {
          height: 18px;
          line-height:    18px;
          text-transform: uppercase;
          text-decoration:    none;
          color:  #484d53;
          font-weight:    bold;
          text-shadow:    0 1px 0 rgba(255, 255, 255, 0.3);
          background: -moz-linear-gradient(
              center top,
              #a1a6ad 0%,
              #b9bfc5 100%
          );
          border-top: 1px solid #b1b6bb;
          border-bottom:  1px solid #373b3f;
          border-left: 1px solid #b9bfc5;
          border-right: 1px solid #b9bfc5;
          -moz-border-radius: 5px;
          font-size:  10px;
          padding:    2px 4px;
          cursor: pointer;    
      }

      nav ul li a {
          padding:    2px 4px;
      }

      nav ul li a:hover {
          background: -moz-linear-gradient(
              center top,
              #fff 0%,
              #bbb 100%
          );
      }

      nav ul li a:active {
          background: -moz-linear-gradient(
              center top,
              #aaa 0%,
              #fff 100%
          );
      }

      #debug {
          display:    none;
      }

      #manager {
          position:   absolute;
          top:    33px;
          right:  0;
          left:   0;
          bottom: 0;
          overflow:   hidden;
      }

      #list {
          position:   absolute;
          top:    0;
          right:  0;
          left:   0;
          bottom: 0;
          overflow:   auto;
      }

      .widget {
          position:   relative;
          margin:  10px 20px 0 20px;
          background: #fff;
      	-moz-box-shadow:    3px 3px 1px rgba(0, 0, 0, 0.3);
      }

      .widget .icon {
          width:  68px;
          padding:    2px;
          border-right:   1px solid #ccc;
      }

      .widget h3 {
          position:   absolute;
          top:    0;
          left:   68px;
          right:  0;
          height: 22px;
          line-height:    22px;
          padding:    0;
          margin: 0 0 0 5px;
          overflow:   hidden;
          white-space:    nowrap;
          font-size:  18px;
          border-bottom:  1px solid #ccc;
      }

      .widget .remove {
          padding:    2px 6px;
      }

      .widget .run {
          padding:    2px 20px;
      }

      .widget nav {
          position:   absolute;
          bottom: 0;
          right:  0;
      }

      .widget nav ul li {
          border-left:    none;
          padding:    0 5px;
      }
    </style>
    <script type='text/javascript'><![CDATA[
      var widgeon;
      var Cc = Components.classes, Ci = Components.interfaces;
      function quit () {
          dbg("quitting using " + widgeon);
          widgeon.quit();
      }

      function run () {
          try {
              dbg("loaded");
              dbg("Components: " + Components);
              dbg("Components.classes: " + Components.classes);
              dbg("Cc: " + Cc);
              dbg("comp=" + Cc["@berjon.com/widgeon-finder;1"]);
              dbg("comp=" + Cc["@berjon.com/widgeon-finder;1"].createInstance(Ci.nsISupports));
              widgeon = Cc["@berjon.com/widgeon-finder;1"].createInstance(Ci.nsISupports).getWidgeon();
              dbg("got widgeon: " + widgeon);
              document.getElementById("version").textContent = widgeon.VERSION;
              widgeon.onInstall(updateList);
              updateList();
          }
          catch (e) {
              dbg("EX: " + e);
          }
      }
      var deb;
      function dbg (str) {
          // if (!deb) deb = document.getElementById("debug");
          // deb.textContent += str + "\n";
          alert(str);
      }

      function updateList () {
          var list = widgeon.getWidgetList();
          dbg("updating list with " + list.length + " items");
          var el = document.getElementById("list");
          el.textContent = "";
          for (var i = 0; i < list.length; i++) {
              var w = list[i];
              var cfg = w.config();
              var uuid = w.uuid;
              var name = "Unnamed Widget";
              if (cfg.shortName) name = cfg.shortName;
              if (cfg.name) name = cfg.name;
              var icon = "XXX-FAIL";
              if (cfg.icons && cfg.icons.length) icon = "widget://" + uuid + "/" + cfg.icons[0].src;
              var html = "<div class='widget'><div class='icon'>" +
                         "<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' " +
                         "width='64' height='64' viewPort='0 0 64 64'><image xlink:href='" +
                         icon + "' width='64' height='64'/></svg></div><h3>" +
                         name + "</h3><nav><ul><li><a href='#' onclick='remove(\"" +
                         uuid + "\")' class='remove button'>✕ remove</a></li><li><a href='#' onclick='runWidget(\"" +
                         uuid + "\")' class='run button'>run widget</a></li></ul></nav></div>";
              el.innerHTML += html;
          }
          // window.sizeToContent();
          dbg("list updated");
      }

      function runWidget (uuid) {
          dbg("running " + uuid);
          widgeon.createWidget(uuid).open();
          dbg("running request made");
      }

      function remove (uuid) {
          dbg("removing " + uuid);
          var res = confirm("Do you really want to remove this widget? ");
          if (res) {
              widgeon.removeWidget(uuid);
              updateList();
              dbg("removed");
          }
      }

      function browse () {
          try {
              dbg("browsing");
              var file = widgeon.browseForWidget();
              dbg("file=" + file);
              if (!file) return;
              var widget = widgeon.installWidget(file);
              dbg("widget=" + widget);
              updateList();
              widget.open();
              dbg("widget open");
          }
          catch (e) {
              alert("EX: " + e);
          }
      }
    ]]></script>
  </head>
  <body onload='run()'>
    <header>
      <h1>Widgeon <span>Manager</span> <em id='version'>0.0</em></h1>
      <nav>
        <ul>
          <li><a onclick='browse()' class='button'>Install Widget</a></li>
          <li><a onclick='quit()' class='button'>Quit</a></li>
          <!-- <li><a href='http://berjon.com/tmp/a-widget.wgt' class='button'>test download</a></li> -->
        </ul>
      </nav>
    </header>
    <div id='manager'>
      <div id='list'></div>
    </div>
    <pre id='debug'>debug
</pre>
  </body>
</html>
